<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .a1{
            width: 100px;
            height: 100px;
            background-color: darkorange;
        }
    </style>
</head>
<body>

<div id="app">
    <h3>缩写</h3>
    <h3>v-bind--->:属性名</h3>
    <h3>v-on--->@事件名</h3>
    v-bind:给HTML标签属性绑定数据:<br/>
    <div :class="myDiv">

    </div><br/>
    <a :href="myHref">跳转百度</a><br/>
    <button v-on:click="login">点击我:v-on缩写</button>
    <button @click="login">点击我:v-on缩写</button>
</div>

</body>

<script>
    Vue.createApp({
        data(){
            return{
                myDiv:'a1',
                myHref:'https://www.baidu.com'
            }
        },
        methods:{
            login(){
                console.log('xxxx')
            }
        }
    }).mount("#app")
</script>

</html>